<html>
<head>
    <title>Left side menu</title>
    <!-- Ext -->
    <link rel="stylesheet" type="text/css" href="ext-all.css" />
    <style type="text/css">
        html, body {
            font: normal 12px verdana;
            margin: 0;
            padding: 0;
            border: 0 none;
            overflow: hidden;
            height: 100%;
        }
        .empty .x-panel-body {
            padding-top:20px;
            text-align:center;
            font-style:italic;
            color: gray;
            font-size:11px;
        }
    </style>
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript">
    Ext.require(['*']);

    Ext.onReady(function(){
        var item1 = Ext.create('Ext.Panel', {
            hideCollapseTool: true,
            title: 'System',
            layout: {
                type:'vbox',
                padding:'5',
                align:'stretch'
            },
            defaults : {
                margins:'0 0 5 0',
                textAlign:'left'
            },
            
            items : [
                {
                    xtype:'button',
                    text: 'Racks'
                },{
                    xtype:'button',
                    text: 'Switches'
                },{
                    xtype:'button',
                    text: 'Terminal Servers'
                },{
                    xtype:'button',
                    text: 'PDUs'
                }
            ]
        });

        var item2 = Ext.create('Ext.Panel', {
            title: 'Process',
            layout: {
                type:'vbox',
                padding:'5',
                align:'stretch'
            },

            defaults : {
                margins:'0 0 5 0',
                textAlign:'left'
            },
            
            items : [{
                xtype:'button',
                text: 'Init'
            },{
                xtype:'button',
                text: 'Test cable'
            },{
                xtype:'button',
                text: 'Test traffic'
            },{
                xtype:'button',
                text: 'Test traffic log'
            }]
        });

        var item3 = Ext.create('Ext.Panel', {
            title: 'Log and Report',
            layout: {
                type:'vbox',
                padding:'5',
                align:'stretch'
            },

            defaults : {
                margins:'0 0 5 0',
                textAlign:'left'
            },

            items : [{
                xtype:'button',
                text: 'Log'
            },{
                xtype:'button',
                text: 'Report'
            },{
                xtype:'button',
                text: 'Log Config'
            },{
                xtype:'button',
                text: 'Report Config'
            }]
        });

        var accordion = Ext.create('Ext.Panel', {
            region:'west',
            margins:'10 5 17 5',
            split:true,
            width: 210,
            layout:'accordion',
            items: [item1, item2, item3]
        });

        var viewport = Ext.create('Ext.Viewport', {
            layout:'border',
            items:[
                accordion, {
                region:'center',
                margins:'5 5 15 0',
                cls:'empty',
                bodyStyle:'background:#f1f1f1',
                html:'<br/><br/>&lt;empty center panel&gt;'
            }]
        });
    });
    </script>
</head>
<body>
  <p>Left side menu test</p>
</body>
</html>
